<template>
  <div class="container page">
    <div class="list">
      <div class="left-p">
        
        <p>
          <span>{{ allInfo.stock_name + ' '}}</span>
          <span>{{ allInfo.stock_code }}</span>
        </p>
        <p>单价:  <span>{{ allInfo.last_px }}</span></p>
        <p>涨幅:  <span>{{ allInfo.px_change_rate }}</span></p>
      </div>
      
      <div v-if="allInfo.activity === '0'" class="right-p">
        <img style="margin-left:25%;margin-top:25%;width:50%;height:50%;" src="https://www.rrjiaoyi.com/static/rr-min/stocksinfo/ps_ggrd_down@3x_new.png" alt="">
      </div>
      <div v-else-if="allInfo.activity === '1'" class="right-p">
        <img style="margin-left:25%;margin-top:25%;width:50%;height:50%;" src="https://www.rrjiaoyi.com/static/rr-min/stocksinfo/ps_bgggrd_up@3x_new.png" alt="">
      </div>
      <div v-else class="right-p">
        <img style="margin-left:25%;margin-top:25%;width:50%;height:50%;" src="https://www.rrjiaoyi.com/static/rr-min/stocksinfo/ps_bg_ggrd_default@3x_new.png" alt="">
      </div>
      <!-- <div v-else class="right-p2" :style="{ 'backgroundImage': 'url(' + bgurlde + ')'}">
      </div> -->
      <!-- <div v-else-if="allInfo.activity === '1'" class="right-p" :style="{ 'backgroundImage': 'url(' + bgurl2 + ')'}">
      </div>
      <div v-else class="right-p" :style="{ 'backgroundImage': 'url(' + bgurl1 + ')'}">
      </div> -->
    </div>

    <div class="list5">
      <div class="left-two-g" v-if="allInfo.emotion < 0 ">
        <p>{{ allInfo.emotion }}</p>
      </div>
      <div class="left-two-r" v-else>
        <p>{{ allInfo.emotion }}</p>
      </div>

      <div class="right-two-g" v-if="allInfo.stock_emotion < 0 ">
        <p><span>{{ allInfo.stock_emotion }}</span></p>
      </div>
      <div class="right-two-r" v-else>
        <p><span>{{ allInfo.stock_emotion }}</span></p>
      </div>
    </div>

      <!-- <div style="height:100rpx;">
        <img style="height:10%;" src="https://www.rrjiaoyi.com/static/rr-min/stocksinfo/ps_bg_zjps_default@3x.png" alt="">
      </div> -->

    <div class="list3">
      <div class="left-three" v-if="playerListData[0]">
        <p :key="player" v-for="player of playerListData"> {{'盘手:' + ' ' + player.name }} </p>
      </div>
      <div v-else>
        <p style="height:250rpx;width:250rpx;padding-top:50rpx">
        <img style="height:250rpx;width:250rpx;" src="https://www.rrjiaoyi.com/static/rr-min/stocksinfo/ps_bg_zjps_default@3x.png" alt="">
        </p>
      </div>

      <div class="right-three" v-if="playerListData[0]">
        <p :key="player" v-for="player of playerListData"> {{ player.tradeType }} </p>
      </div>
      <div class="right-three" style="text-align:left;padding-left:50rpx" v-else>
        <p>个股近期未有盘手交易过,快下载人人交易网APP,成为此股领航操盘手吧</p>
      </div>

    </div>

    <!-- <div class="list6">
      <div class="left-two">
        <p><span>时间:&nbsp&nbsp</span><span>{{ allInfo.orderDateTime}}</span></p>
        <p><span>方向:&nbsp&nbsp</span><span>{{ allInfo.tradeType}}</span></p>
      </div>
      <div class="right-two">
        <p><span>数量:&nbsp&nbsp</span><span>{{ allInfo.turnover_num}}</span></p>
        <p><span>价格:&nbsp&nbsp</span><span>{{ allInfo.last_px}}</span></p>
      </div>
    </div> -->

    <div class="list7">
      <div class="left-three">
        <p> 平均买入成本 </p>
        <p> 平均卖出成本 </p>
      </div>
      <div class="right-three">
        <p style="color:#d74c17"> {{ allInfo.buyFiveAvgPrice }} </p>
        <p> {{ allInfo.sellFiveAvgPrice }} </p>
      </div>
    </div>

    <p class="foot_trader">数据来源于人人交易网APP</p>

  </div>
</template>
<script>
import qcloud from 'wafer2-client-sdk'
import YearProgress from '@/components/YearProgress'
import {showSuccess, showModal} from '@/util'
import {get, post} from '@/util'
import {get2, post2} from '@/server/api'
import config from '@/config'
export default {
  components: {
    YearProgress
  },
  data () {
    return {
      activity: true,
      playerListData: [],
      allInfo: {
        "orderDateTime": "-",
        "last_px": "-",
        "buyCount": 0,
        "stock_name": "-",
        "activity": "-",
        "avgPrice": "-",
        "turnover_num": "-",
        "sellCount": 0,
        "priceSection": "-",
        "px_change_rate": "-",
        "stock_code": "-",
        "tradeType": "-"
      },
      bgurl1: 'https://www.rrjiaoyi.com/static/rr-min/stocksinfo/ps_bg_psxj@3x.png',
      bgurl2: 'https://www.rrjiaoyi.com/static/rr-min/stocksinfo/ps_bg_up@3x.png',
      bgurlde: 'https://www.rrjiaoyi.com/static/rr-min/stocksinfo/ps_bg_default.png',
      stock: {a: "", b: "", c: "", openid: "sssssss", openid_group: "none", at_group: "false"},
      // stock: {a: "000429", b: "SZ", c: "粤高速Ａ", openid: "sssssss", openid_group: "", at_group: ""},
      playerRank: []
    }
  },
  mounted () {
    // 分享
    // let sharepath = this.$root.$mp.query.sharepath
    // if (sharepath) {
    //   wx.navigateTo({
    //     url: `/pages/web-view/main?path=${sharepath}`
    //   })
    // }
    // this.userinfo = wx.getStorageSync('userinfo')
    
    // if (this.$root.$mp.query.a) {
    //   this.stock = {'a': this.$root.$mp.query.a, 'b': this.$root.$mp.query.b, 'c': this.$root.$mp.query.c, openid: "sssssss", openid_group: "none", at_group: "false"}
    // }

    // let openid = wx.getStorageSync('userinfo').openId

    // this.infoList(this.stock.a, this.stock.b, openid).then(result => {
    //   // console.log('222222222', result.result);
      
    //   this.allInfo = result.result
    //   this.activity = this.allInfo.activity
    //   this.activity = false
    // });

    // this.playerList(this.stock.a, this.stock.b).then(result => {
    //   // console.log('222222222', result.result);
    //   this.playerListData = result.result
    //   // this.activity = this.allInfo.activity
    // });

  },
  onLoad() {
    wx.setNavigationBarTitle({
      title: '个股交易热度',
      // title: `${this.stock.c}`,
      success: function(res) {
        // success
      }
    })
  },
  onShareAppMessage() {
    return {
      title: `${wx.getStorageSync('userinfo').nickName}测了${this.stock.c},也来看看吧`,
      imageUrl: 'https://www.rrjiaoyi.com/static/rr-min/share/share_info.png',
      path: `/pages/me/main?sharepath=home`
    }
  },
  methods: {
    // 查询盘手
    async playerList(a, b) {
      return await post2('recent_deal', {'stockCode': a, 'market': b})
    },
    // 查询股票
    async infoList(a, b, openid) {
      return await post2('search_one', {'stockCode': a, 'market': b, 'openid': openid, 'openid_group': 'none', 'at_group': 'false'})
    },
    group () {
      wx.navigateTo({
        url: '/pages/group/main'
      })
    },
    async player() {
      return await post('minipro/List', {}, {'api':'all', 'page':1})
    },
    async demo() {
    // return await get2('demo', {})
    },
    async joke() {
      return await get2('api/jokes', {})
    },
    jumpClick (comment) {
      wx.navigateTo({
        // url: '/pages/web-view/main'
        url: '/pages/web-view/main?path=' + 'https://wj.qq.com/s/2491547/f457/'
        // url: '/pages/detail/main'
      })
    },
    loginSuccess (res) {
      showSuccess('登录成功')
      wx.setStorageSync('userinfo', res)
      this.userinfo = res
    }

  },
  onShow () {
    this.userinfo = wx.getStorageSync('userinfo')


    if (this.$root.$mp.query.a) {
      this.stock = {'a': this.$root.$mp.query.a, 'b': this.$root.$mp.query.b, 'c': this.$root.$mp.query.c, openid: "sssssss", openid_group: "none", at_group: "false"}
    }

    let openid = wx.getStorageSync('userinfo').openId

    this.infoList(this.stock.a, this.stock.b, openid).then(result => {
      // console.log('222222222', result.result);
      
      this.allInfo = result.result
      this.activity = this.allInfo.activity
      setTimeout(() => {
        this.activity = false        
      }, 1000)
    });

    this.playerList(this.stock.a, this.stock.b).then(result => {
      // console.log('33333', result.result);
      this.playerListData = result.result
      // this.activity = this.allInfo.activity
    });
    // console.log(123)
    // let userinfo = wx.getStorageSync('userinfo')
    // console.log([userinfo])
    // if (userinfo) {
    //   this.userinfo = userinfo
    // }
    // console.log(this.userinfo)
  }
}
</script>

<style lang='scss'>
.container{
  font-size: 30rpx;
  color: white;
  // background-color: #070d1b;
  // width: 100%;
  // line-height: 100%;
  // opacity: 0.7;
}
page {
  background-color: #090f1d;
  // background-color: #070d1b;
  // background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  // background-image: url("https://www.rrjiaoyi.com/static/rr-min/common/bg@3x.png");
  // width: 100%;
  height: 100%;
}
.list {
  margin: 18rpx;
  height: 250rpx;
  line-height: 50rpx;
  display: flex;
  align-items: center;
  .right-p {
    margin: 15rpx;
    height: 250rpx;
    background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
    background-image: url("https://www.rrjiaoyi.com/static/rr-min/stocksinfo/ps_bg_gzd@3x.png");
    flex: 1;
  }
  // .right-p2 {
  //   margin: 15rpx;
  //   height: 250rpx;
  //   background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  //   background-image: url("https://www.rrjiaoyi.com/static/rr-min/stocksinfo/ps_bg_up@3x.png");
  //   flex: 1;
  // }
  // .right-p3 {
  //   margin: 15rpx;
  //   height: 250rpx;
  //   background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  //   background-image: url("https://www.rrjiaoyi.com/static/rr-min/stocksinfo/ps_bg_psxj@3x.png");
  //   flex: 1;
  // }
  .left-p {
    margin: 15rpx;
    height: 250rpx;
    background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
    background-image: url("https://www.rrjiaoyi.com/static/rr-min/stocksinfo/ps_bg_gr@3x.png");
    color: rgb(208, 227, 238);
    flex: 1;
    // padding-left: 30rpx;
    >p:nth-child(1) {
      margin-top: 80rpx;
      padding-left: 30rpx;
      >span:nth-child(1) {
        color: #2DA1BB;
      }
      >span:nth-child(2) {
        color: #2DA1BB;
      }
    }
    >p:nth-child(2) {
      padding-left: 30rpx;
      color: #909399;
      // color: #999;
      // color: #C0C4CC;
      span {
        color: #fff;
      }
    }
    >p:nth-child(3) {
      padding-left: 30rpx;
      color: #909399;
      span {
        color: #2DA1BB;
      }
    }
  }
}
.btn-p {
  background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  background-image: url("https://www.rrjiaoyi.com/static/rr-min/stocksinfo/cb_bg_bt2@3x.png");
  height: 120rpx;
  line-height: 120rpx;
  // width: 75%;
  margin: 0 130rpx;
  margin-top: 150rpx;
  text-align: center;
  // opacity: 1;
}
.list2 {
  margin: 30rpx;
  background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  background-image: url("https://www.rrjiaoyi.com/static/rr-min/stocksinfo/ps_bg_zjjy@3x.png");
  height: 300rpx;
  line-height: 80rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  color: #D0E3EE;
  .left-two {
    flex: 3;
    color: #44CFDC;
  }
  .right-two {
    flex: 4;
    text-align: right;
    >p:nth-child(1) {
      >span:nth-child(1) {
        color: #909399;
      }
      >span:nth-child(2) {
        color: #2DA1BB;
      }
      >span:nth-child(3) {
        color: #2C989F;
      }
    }
    >p:nth-child(2) {
      span {
        color: #2DA1BB;
      }
    }
    >p:nth-child(3) {
      span {
        color: #2DA1BB;
      }
    }
  }
}
.list3 {
  margin: 30rpx;
  background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  background-image: url("https://www.rrjiaoyi.com/static/rr-min/stocksinfo/ps_bg_zjgs@3x.png");
  height: 430rpx;
  line-height: 80rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  color: #D0E3EE;
  .left-three {
    padding-top: 50rpx;
    flex: 3;
  }
  .right-three {
    padding-top: 50rpx;
    flex: 1;
    text-align: right;
    color: #44CFDC
  }
}
.list5 {
  margin: 30rpx;
  background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  background-image: url("https://www.rrjiaoyi.com/static/rr-min/stocksinfo/board@3x.png");
  height: 250rpx;
  line-height: 80rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  color: #D0E3EE;
  font-size: 40rpx;
  .left-two-r {
    width: 100%;
    flex: 3;
    color: #d74c17;
    padding-top: 90rpx;
    text-align: center;
    margin-left: 6%;
  }
  .right-two-r {
    flex: 3;
    color: #d74c17;
    padding-top: 90rpx;
    text-align: center;
    margin-right: 6%;
  }
  .left-two-g {
    flex: 3;
    color: #17d7b4;
    padding-top: 90rpx;
    text-align: center;
    margin-left: 6%;
  }
  .right-two-g {
    flex: 3;
    color: #17d7b4;
    padding-top: 90rpx;
    text-align: center;
    margin-right: 6%;
  }
}
.list6 {
  margin: 30rpx;
  background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  background-image: url("https://www.rrjiaoyi.com/static/rr-min/stocksinfo/ps_bg_ggrd2_zjjy@3x.png");
  height: 250rpx;
  line-height: 80rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  color: #D0E3EE;
  .left-two {
    flex: 4;
    padding-top: 50rpx;
    // color: #44CFDC;
    >p:nth-child(1) {
      >span:nth-child(1) {
        color: #D0E3EE;
      }
      >span:nth-child(2) {
        color: #44CFDC;
      }
    }
    >p:nth-child(2) {
      >span:nth-child(1) {
        color: #D0E3EE;
      }
      >span:nth-child(2) {
        color: #44CFDC;
      }
    }
  }
  .right-two {
    flex: 4;
    padding-top: 50rpx;
    padding-left: 150rpx;
    >p:nth-child(1) {
      >span:nth-child(1) {
        color: #D0E3EE;
      }
      >span:nth-child(2) {
        color: #44CFDC;
      }
    }
    >p:nth-child(2) {
      >span:nth-child(1) {
        color: #D0E3EE;
      }
      >span:nth-child(2) {
        color: #44CFDC;
      }
    }
  }
}

.list7 {
  margin: 30rpx;
  background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
  background-image: url("https://www.rrjiaoyi.com/static/rr-min/stocksinfo/ps_bg_gg_zjjy@3x.png");
  height: 250rpx;
  line-height: 80rpx;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  color: #D0E3EE;
  .left-three {
    padding-top: 50rpx;
    flex: 3;
  }
  .right-three {
    padding-top: 50rpx;
    flex: 1;
    text-align: right;
    color: #44CFDC
  }
}

.foot_trader{
  margin: 100rpx;
  padding-bottom: 100rpx;
  text-align: center;
  color: #47d8e2;
}
</style>
